<script setup>
import { ColorEnum } from '@/enum/graph.enum.js'
import {
  MapDraw,
  ZoomIn,
  ZoomOut,
  Return,
  GoOn,
  Delete,
  Save,
  AlignBottom,
  AlignTop,
  AlignHorizontally,
  AlignVertically,
  AlignLeft,
  AlignRight,
  ExpandLeft,
  ExpandRight
} from '@icon-park/vue-next'
import { reactive, onMounted, nextTick } from 'vue'
import { useGraphStore } from '@/store/modules/graphStore.js'

const graphStore = useGraphStore()
const {
  graph,
  onChangeGraphScale,
  undoGraph,
  redoGraph,
  clearGraph,
  savePage,
  setAlignMode
} = graphStore
const config = reactive({
  isShowMap: true,
  isUnfold: true
})
const onToggleMiniMap = () => {
  config.isShowMap = !config.isShowMap
}
const onToggleUnfold = () => {
  config.isUnfold = !config.isUnfold
}
onMounted(() => {
  /**
   * 用来修改小地图背景色使其和画布背景色统一
   */
  nextTick(() => {
    const miniMap = document.querySelector('.x6-widget-minimap')
    if (miniMap) {
      miniMap.style.background = ColorEnum[graph.info.backgroundColor].color || '#ffffff'
    }
  })
})
</script>

<template>
  <div class="absolute top-[10px] right-[10px]  text-right group">
    <div class="bg-white p-1 rounded-md inline-block relative  hover:z-50">
      <a-tooltip :content="config.isUnfold ? '收起工具栏' : '展开工具栏'" position="bottom" size="mini">
        <a-button
          type="text"
          class="text-arco-text-2 rounded-md"
          @click="onToggleUnfold"
        >
          <template #icon>
            <ExpandLeft theme="outline" v-if="config.isUnfold"></ExpandLeft>
            <ExpandRight theme="outline" v-else></ExpandRight>
          </template>
        </a-button>
      </a-tooltip>
      <a-space size="mini" v-show="config.isUnfold">
        <template #split>
          <a-divider direction="vertical" class="mx-0" />
        </template>
        <div>
          <a-tooltip content="撤销" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="undoGraph"
            >
              <template #icon>
                <return theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="重做" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="redoGraph"
            >
              <template #icon>
                <go-on theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
        </div>
        <div class="flex items-center">
          <a-tooltip content="缩小" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="onChangeGraphScale('in')"
            >
              <template #icon>
                <zoom-out theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <span class="mx-1 text-[14px] inline-block w-[40px] text-center">
            {{ (graph.scaleCount * 100).toFixed() }}%
          </span>
          <a-tooltip content="放大" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="onChangeGraphScale('out')"
            >
              <template #icon>
                <zoom-in theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
        </div>
        <a-button-group>
          <a-tooltip content="左对齐" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('left')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-left theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="水平居中" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('horizontally')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-horizontally theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="右对齐" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('right')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-right theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
        </a-button-group>
        <a-button-group>
          <a-tooltip content="上对齐" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('top')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-top theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="垂直居中" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('vertically')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-vertically theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="下对齐" position="bottom" size="mini">
            <a-button
              @click="setAlignMode('bottom')"
              type="text"
              class="text-arco-text-2"
            >
              <template #icon>
                <align-bottom theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
        </a-button-group>
        <div>
          <a-tooltip content="清空画布" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="clearGraph"
            >
              <template #icon>
                <delete theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="保存画布" position="bottom" size="mini">
            <a-button
              type="text"
              class="text-arco-text-2 rounded-md"
              @click="savePage(true)"
            >
              <template #icon>
                <save theme="outline" />
              </template>
            </a-button>
          </a-tooltip>
        </div>
        <a-tooltip content="小地图" position="bottom" size="mini">
          <a-button
            type="text"
            class="text-arco-text-2 rounded-md"
            @click="onToggleMiniMap"
          >
            <template #icon>
              <map-draw theme="outline" />
            </template>
          </a-button>
        </a-tooltip>
      </a-space>
    </div>
    <div
      id="editor-minimap-content"
      v-show="config.isShowMap"
      class="editor-minimap-content mt-2"
    ></div>
  </div>
</template>

<style lang="less">
.editor-minimap-content{
  display: flex;
  justify-content: flex-end;
}
</style>
